<template>
  <Layout>
    <!-- <router-view />显示的是当前路由地址所对应的内容 -->
    <router-view v-slot="{ Component, route }">
      <transition mode="out-in" :name="route.meta.transition">
        <component :is="Component" :key="route.path" />
      </transition>
    </router-view>
  </Layout>
</template>

<script setup lang="ts">
import Layout from '@/views/layout/index.vue'
</script>

<style lang="less" scoped>
.fade-enter-from {
  opacity: 0;
  transform: translateX(20px);
}
.fade-enter-active {
  transition: all 0.5s;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave-from {
  opacity: 1;
}
.fade-leave-active {
  transition: all 0.5s;
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>

<style lang="less"></style>
